<template>
  <div class="hello-world">
    {{ msg }}
    <Weather></Weather>
    <PM25></PM25>
    <Bottom></Bottom>
  </div>
</template>

<script>
import api from '../api/index'
import Weather from './Weather'
import PM25 from './PM25'
import Bottom from './Bottom'



export default {
  name: 'HelloWorld',
  components: {Weather, PM25, Bottom},
  data() {
      return {
        msg: 'test',
        shift: 'PM', // tabs焦点
      }
  },
  methods: {
    GetWeather(){
      api.getWeather({
          params:{}
      }).then((response)=>{
          console.log(res)
          // this.data
      }).catch((error)=>{
          console.error(error)
      })
    },
  },
  mounted() {
    this.GetWeather();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello-world {
  height: 100%;
  width: 100%;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
